@@include('../_includes/html-head.html', {"title": "Landing - Product listing", "path":"../"})

<body>
	
	@@include('../_includes/header.html')
	
	
	<main id="site-content" role="main">
      <div class="container mt-5">

      </div>
      <div class="container">
        <div class="row justify-content-between">
		
		
         <div class="col-xl-3 d-none d-xl-block">
			<!-- Manufacturers Widget -->
			<div class="widget filters">
			  <span class="d-flex text-muted mb-2">Brands</span>
			  <ul class="list-unstyled" data-v-component-product-manufacturers="sidebar" data-v-filter="url">
				<li data-v-manufacturer>
				  <div class="form-check form-check-minimal">
					<label class="form-check-label">
					  <input class="form-check-input" type="checkbox" name="manufacturer_id[]" value="" data-v-manufacturer-manufacturer_id>
					  <span data-v-manufacturer-name>Mango</span>
					</label>
				  </div>
				</li>
				<li data-v-manufacturer>
				  <div class="form-check form-check-minimal">
					<input class="form-check-input" type="checkbox" name="manufacturer_id[]" value="" data-v-manufacturer-manufacturer_id>
					<label class="form-check-label" for="brand-2">
					  <span data-v-manufacturer-name>Assos</span>
					</label>
				  </div>
				</li>
				<li data-v-manufacturer>
				  <div class="form-check form-check-minimal">
					<label class="form-check-label" for="brand-3">
					  <input class="form-check-input" type="checkbox" name="manufacturer_id[]" value="" data-v-manufacturer-manufacturer_id>
					  <span data-v-manufacturer-name>Brand name</span>
					</label>
				  </div>
				</li>
			  </ul>
			</div>
		 </div>
		  
          <div class="col-xl-9">

			<div class="row g-3 g-md-5 align-items-end">
			  <div class="col-md-6">
				<h1 class="mb-2" data-v-vendor-name>Manufacturer name</h1>

				<img class="img-thumbnail mb-3" width="200" src="" data-v-if="this.vendor.image" data-v-vendor-image_url>
				
				@@include('../_includes/breadcrumb.html')
				
			  </div>
			  <div class="col-md-6 text-md-end">
				<ul class="list-inline">
				  <li class="list-inline-item">
					<div class="dropdown">
					  <a class="btn btn-light" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
						Price high to low <i class="la la-arrow-down"></i>
					  </a>

					  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
						<li><a class="dropdown-item" href="#"><i class="la la-arrow-up"></i> <span>Price high to low</span></a></li>
						<li><a class="dropdown-item" href="#"><i class="la la-arrow-down"></i> <span>Price low to high</span></a></li>
						<li><a class="dropdown-item" href="#"><i class="la la-chart-line"></i> <span>Popularity</span></a></li>
						<li><a class="dropdown-item" href="#"><i class="la la-tags"></i> <span>Sales</span></a></li>
					  </ul>
					</div>
				  </li>
				</ul>
			  </div>
			</div>
			
            <div class="row g-3" data-v-component-products="index" data-v-limit="6" data-v-page="url" data-v-vendor_id="url" data-v-image_size="medium"  data-v-filter="url">
              <div class="col-md-6 col-xl-4" data-v-product>
                <div class="product">
				
					@@include('../_includes/product-list-item.html')
				
				</div>
                </div>             		

				<div data-v-if="index < 1">
					<h4 class="text-center py-4">No products to display!</h4>
				</div>
			 </div>
            
				<div class="mt-4 py-2">
				
					@@include('../_includes/pagination.html', {"component": "products", "component-index":0, "query_string":true})
			
				</div>
			</div>
          </div>
        </div>
      </div>
    </main>

   
@@include('../_includes/footer.html')   
 
@@include('../_includes/footer-scripts.html')    

<script id="filter-js" src="../../js/filter.js"></script>  	
  	
</body>
</html>
